<template>
  <div>
    <c-table-box
      ref="cTableBox"
      hide-func
      checkbox
      :other-filters="otherFilters"
      :table-config="tableConfig"
      @selection-change="selectionChange"
    >
      <template #btn>
        <c-permission v-if="type==='all'" code="all">
          <c-button opt-code="export" size="mini" type="primary" @click="exportVisible=true">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='designChangeApply'" code="designChangeApply">
          <c-button opt-code="edit" size="mini" type="primary" @click="edit">编辑</c-button>
          <c-button opt-code="termination" size="mini" type="primary" @click="handleTerminal">终止</c-button>
          <c-button opt-code="export" size="mini" type="primary" @click="exportVisible=true">导出</c-button>
        </c-permission>
      </template>

    </c-table-box>
    <export-files v-if="exportVisible" title="导出" :config="exportAllConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />
  </div>
</template>
<script>
import { getDictByPatchType } from '@/api/dataDict'
import { otherFiltersItem } from '@/utils'
import { terminal } from '@/api/shopDesignChange'
import { getAreaList } from '@/api/common'

export default {
  name: 'List',
  components: { },

  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      exportVisible: false,
      typeFilters: [],
      id: '',
      ready: false,
      delayLoading: false,
      stopLoading: false,
      doorHeadOptions: [],
      constTypeOptions: [],
      decorationFormOptions: [],
      applyBizTypeOptions: [],
      applySpecialZoneOptions: [],
      loading: false,
      activeTabIndex: 0,
      activeName: 'all',
      activeRowData: {},
      handlefilters: [],
      decorationRangeOptions: [], // 门店装修范围
      tableSelected: [], // 当前所选中表格行数据
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopDesignChange/getShopDesignChange/page`,
        hideFuncBar: true,
        pageSize: 10,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: 180,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'changeCode',
            label: '设计变更单号',
            minWidth: 220
          },
          {
            prop: 'state',
            label: '变更申请进度',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DESIGN_CHANGE_STATE'
            }

          },
          {
            prop: 'isRedesign',
            label: '是否重复设计',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'redesignReason',
            label: '重复设计原因',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'REDESIGN_REASON'
            }
          },
          {
            prop: 'officeName',
            label: '办事处',
            minWidth: 130
          },
          {
            prop: 'clientName',
            label: '客户',
            minWidth: 130
          },
          {
            prop: 'name',
            label: '门店',
            minWidth: 130
          },
          {
            prop: 'marketType',
            label: '报图类型',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'MARKET_TYPE'
            }
          },
          {
            prop: 'constType',
            label: '门店建设类型',
            minWidth: 130,
            render: (creat, row) => {
              if (!row.constType || !this.constTypeOptions) {
                return
              }
              let list = []
              if (typeof (row.constType) === 'string') {
                list = row.constType.split(',')
              } else {
                list = row.constType
              }
              const arr = []
              this.constTypeOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationForm',
            label: '装修形式',
            minWidth: 130,
            render: (creat, row) => {
              if (!row.decorationForm || !this.decorationFormOptions) {
                return
              }
              let list = []
              if (typeof (row.decorationForm) === 'string') {
                list = row.decorationForm.split(',')
              } else {
                list = row.decorationForm
              }
              const arr = []
              this.decorationFormOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationRange',
            label: '设计范围',
            minWidth: 130,
            render: (creat, row) => {
              if (!row.decorationRange || !this.decorationRangeOptions) {
                return
              }
              let list = []
              if (typeof (row.decorationRange) === 'string') {
                list = row.decorationRange.split(',')
              } else {
                list = row.decorationRange
              }
              const arr = []
              this.decorationRangeOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picUrgentLevel',
            label: '图纸紧急程度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_URGENT_LEVEL'
            },
            minWidth: 130
          },
          {
            prop: 'isKaMarket',
            label: '是否KA卖场',
            minWidth: 130,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            }
          },
          {
            prop: 'applyBizType',
            label: '设计申请业务类型',
            minWidth: 130,
            render: (creat, row) => {
              if (!row.applyBizType || !this.applyBizTypeOptions) {
                return
              }
              let list = []
              if (typeof (row.applyBizType) === 'string') {
                list = row.applyBizType.split(',')
              } else {
                list = row.applyBizType
              }
              const arr = []
              this.applyBizTypeOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'applySpecialZone',
            label: '申请设计区域',
            minWidth: 130,
            render: (creat, row) => {
              if (!row.applySpecialZone || this.applySpecialZoneOptions.length === 0) {
                return
              }
              let list = []
              if (typeof (row.applySpecialZone) === 'string') {
                list = row.applySpecialZone.split(',')
              } else {
                list = row.applySpecialZone
              }
              const arr = []
              this.applySpecialZoneOptions.forEach((item) => {
                const flag = list.some(v => v === item.areaCode)
                if (flag) {
                  arr.push(item.areaName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          }]
      }

    }
  },
  computed: {
    otherFilters() {
      return [...this.serachFilters, ...this.typeFilters]
    },
    selectedIds() {
      return this.tableSelected.map(row => {
        return row.id
      })
    },
    exportAllConfig() {
      return [{
        code: 'export',
        name: '门店设计变更管理',
        dataApi: '/slm-admin/api/v1/shopDesignChange/export',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        headers: { 'Permission-perCode': 'storechangerequestlist' },
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    }
  },
  watch: {
    type: {
      handler(v) {
        this.setOtherFilters(v)
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.refreshTable('')
      }
    }
  },
  created() {
    this.getDictByPatchTypeAll()
    this.getAreaSelect()
    this.refreshTable()
  },
  activated() {
    if (this.ready && this.refreshTable) {
      this.refreshTable()
    }
  },
  deactivated() {
    this.ready = true
  },
  methods: {
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.applySpecialZoneOptions = res.data.records
      })
    },
    async getDictByPatchTypeAll() {
      const { BIZ_TYPE, CONST_TYPE, DECORATION_RANGE, DECORATION_FORM } =
       await getDictByPatchType(['BIZ_TYPE', 'STOP_REASON_TYPE', 'CONST_TYPE', 'DECORATION_RANGE', 'DECORATION_FORM'])
      this.constTypeOptions = CONST_TYPE // 门店建设
      this.decorationRangeOptions = DECORATION_RANGE// 门店装修范围
      this.decorationFormOptions = DECORATION_FORM// 装修形式
      this.applyBizTypeOptions = BIZ_TYPE
    },
    edit() {
      if (!this.singleJudge(this.tableSelected, '编辑', false)) {
        return
      }
      this.$router.push({ name: 'FromDesignChange', query: { id: this.tableSelected[0].id, constCode: this.tableSelected[0].constCode }})
    },
    // 终止
    handleTerminal() {
      if (!this.singleJudge(this.tableSelected, '终止', false)) {
        return
      }
      this.$confirm(`是否终止已勾选的【${this.tableSelected.length}条】数据，不再重新提报设计变更？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        terminal(this.selectedIds).then(res => {
          if (res.success === 1) {
            this.$message.success('操作成功')
            this.refreshTable()
          }
        })
      }).catch(() => {
      })
    },
    selectionChange(v) {
      this.tableSelected = v
    },

    // 导出
    handleExport() {
      this.exportVisible = true
    },
    handleDetail(data) {
      this.$router.push({ name: 'ShopDesignChangeDetail', query: { id: data.id }})
    },

    // 设置过滤条件
    setOtherFilters(v) {
      switch (v) {
        case 'all':
          this.typeFilters = []
          break
        case 'designChangeApply':
          this.typeFilters = [otherFiltersItem('state', 'A', '=')]
          break
      }
    },
    // 刷新表格
    refreshTable(v = 'onPage') {
      this.$nextTick(() => {
        this.$refs.cTableBox.initTableData(v)
      })
    },

    // 导出成功
    handleExportSuccess() {
      this.$message.success('导出成功！')
    },
    // 导入成功
    handleImportSuccess() {
      this.$message.success('导入成功！')
    }
  }
}
</script>
